<template>
  <div>
    <el-card>
      <el-button @click="$router.back()" type="primary">返回列表</el-button>
      <el-row :gutter="10">
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <span>用户ID：{{$router.history.current.query.id }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <span>用户昵称：{{ $router.history.current.params.name }}</span>
          </div></el-col
        >
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <span>联系电话：{{ $router.history.current.params.phone }}</span>
          </div></el-col
        >
      </el-row>
      <hr />
      <h3>用户消费情况</h3>
      <div class="chartsbox">
        <div :style="{ width: '400px', height: '500px' }">
          <span>日期：</span>
          <el-date-picker
            v-model="time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :picker-options="pickerOptions"
            @change="search"
            clearable
          >
          </el-date-picker>
        </div>
        <div
          id="myChart"
          :style="{ width: '500px', height: '500px' }"
          class="myCharts"
        ></div>
        <div :style="{ width: '500px', height: '500px' }" class="sellN">
          <div>
            <p>订单总量：{{ goodsNum }}</p>
            <p>订单总额：{{ Totalconsumption }}元</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-table border :data="tableData" row-key="id">
        <el-table-column sortable label="商户编号" prop="id" align="center" />
        <el-table-column sortable label="商户名" prop="name" align="center" />
        <el-table-column
          sortable
          label="订单商品数量"
          prop="storequantity"
          align="center"
        />
        <el-table-column
          sortable
          label="订单金额"
          prop="quantity"
          align="center"
        />
        <el-table-column sortable label="消费额" prop="money" align="center" />
        <el-table-column align="center" label="消费日期">
          <template slot-scope="{ row }">
            {{ row.time | formatDate }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="[2, 3, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"
></script>
<script>
import { getPBDuser, searchPBDuser } from "@/api/userPBD.js";
import { queryFn } from "@/utils";
export default {
  computed: {
    goodsNum() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += this.tableData[i].quantity;
      }
      return sum;
    },
    Totalconsumption() {
      let sum = 0;
      for (let i = 0; i < this.tableData.length; i++) {
        sum += parseFloat(this.tableData[i].money);
      }
      return sum;
    },
  },
  data() {
    return {
      // 表格数据
      tableData: [],
      // 翻页
      currentPage: 1,
      page: {
        page: 1,
        size: 10,
        total: 7,
      },
      // 查询数据
      time: "",
      form: {
        name: "",
        time_gte: "",
        time_lte: "",
      },
      // timeList: [],
      // 时间切换数据
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.drawLine();
    // console.log(this.$router.history.current)
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var dom = document.getElementById("myChart");
      var myChart = this.$echarts.init(dom);
      var app = {};
      // 绘制图表
      var option;

      option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        label: {
          fontSize: 20,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "居家必备" },
              { value: 735, name: "生鲜" },
              { value: 580, name: "便利食品" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
    // 日期时间变化时赋值
    async search(v) {
      if (!v) return;
      this.form.time_gte = v[0];
      this.form.time_lte = v[1];
      const obj = queryFn(this.form);
      const { data } = await searchPBDuser(obj);
      console.log(data);
      this.tableData = data;
      this.page.total = data.length;
    },
    // 变换页面条数
    handleSizeChange(val) {
      this.page.size = val;
      const obj = {
        _limit: this.page.size,
      };
      // console.log(obj)
      this.getPBDuser(obj);
    },
    // 翻页
    handleCurrentChange(val) {
      this.page.page = val;
      const obj = {
        _page: this.page.page,
        _limit: this.page.size,
      };
      this.getPBDuser(obj);
    },
    // 获取用户信息及分页信息
    async getPBDuser(obj) {
      const { data } = await getPBDuser(obj);
      // console.log(data)
      this.tableData = data;
    },
  },
  created() {
    this.getPBDuser();
  },
};
</script>

<style lang="less" scoped>
.form {
  box-sizing: border-box;
}
.el-row {
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.buttonL {
  padding-left: 30px;
  display: inline-block;
}
.el-button + .el-button {
  margin-left: 30px;
}
.chartsbox {
  margin-left: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.sellN {
  line-height: 250px;
}
</style>
